// 引入一个包
const path = require("path");
// 引入 html 插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 引入清楚 dist 插件
const {CleanWebpackPlugin} = require("clean-webpack-plugin");

module.exports = {

	// 指定入口文件
	entry: "./src/index.ts",

	// 指定打包文件所在目录
	output: {
		// 打包后文件的名字
		filename: "bundle[hash:10].js",
		// 指定打包文件的目录
		path: path.resolve(__dirname, "dist"),
		// 告诉webpack不适用箭头函数
		environment: {
			arrowFunction: false,
			const: false
		}
	},

	// 指定 webpack 打包时使用的模块
	module: {
		rules: [
			{
				// test 指定生效的文件
				test: /\.ts$/,
				// 要使用的 loader
				use: [
					// 配置babel
					{
						// 指定加载器
						loader: "babel-loader",
						// 设置babel
						options: {
							// 设置自定义的环境
							presets: [
								[
									// 指定环境的插件
									"@babel/preset-env",
									// 配置信息
									{
										// 要兼容的目标浏览器
										targets: {
											"chrome": "58",
											"ie": "11"
										},
										// 指定 corejs的版本
										"corejs": "3",
										//	使用corejs的方式 "usage" 按需加载
										"useBuiltIns": "usage"
									}
								]
							]
						}
					},
					"ts-loader"],  /* 可以是数组，从右到左执行 */
				exclude: /node-modules/
			},
			// 指定less
			{
				test: /\.less$/,
				use: [
					"style-loader",
					"css-loader",
					{
						loader: "postcss-loader",
						options: {
							postcssOptions: {
								plugins: [
									[
										"postcss-preset-env",
										{
											browser: "last 2 versions"
										}
									]
								]
							}
						}
					},
					"less-loader"
				]
			}
		]
	},

	// 配置 webpack 的插件
	plugins: [
		new CleanWebpackPlugin(),
		new HtmlWebpackPlugin({
			template: "./src/index.html",  // 入口文件
		}),
	],

	// 用来设置模块
	resolve: {
		extensions: [".ts", ".js"]
	},

	target: 'web',
	devServer: {
		port: 3000, // 默认端口
		open: true,
		host: "192.168.0.105"
	}
}